<template>
  <div class="order-management">
    <div class="page-header">
      <h1>📋 {{ getPageTitle() }}</h1>
      <div class="header-actions">
        <button @click="refreshOrders" class="refresh-btn" :disabled="loading">
          <span v-if="loading">🔄</span>
          <span v-else>🔄</span>
          刷新
        </button>
        <button @click="exportOrders" class="export-btn">
          📊 导出订单
        </button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon">💰</div>
        <div class="stat-info">
          <div class="stat-value">{{ stats.totalAmount || 0 }}</div>
          <div class="stat-label">总销售额</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">📦</div>
        <div class="stat-info">
          <div class="stat-value">{{ stats.totalOrders || 0 }}</div>
          <div class="stat-label">总订单数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">⏳</div>
        <div class="stat-info">
          <div class="stat-value">{{ stats.pendingOrders || 0 }}</div>
          <div class="stat-label">待处理订单</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">✅</div>
        <div class="stat-info">
          <div class="stat-value">{{ stats.completedOrders || 0 }}</div>
          <div class="stat-label">已完成订单</div>
        </div>
      </div>
    </div>

    <!-- 筛选和搜索 -->
    <div class="filter-section">
      <div class="filter-row">
        <div class="filter-group">
          <label>订单状态：</label>
          <select v-model="statusFilter" @change="loadOrders">
            <option value="">全部状态</option>
            <option value="0">待付款</option>
            <option value="1">待发货</option>
            <option value="2">运输中</option>
            <option value="3">已完成</option>
            <option value="4">已取消</option>
            <option value="5">申请退货</option>
            <option value="6">已退货</option>
          </select>
        </div>
        
        <div class="filter-group">
          <label>时间范围：</label>
          <input type="date" v-model="startDate" @change="loadOrders">
          <span>至</span>
          <input type="date" v-model="endDate" @change="loadOrders">
        </div>
        
        <div class="search-group">
          <input 
            type="text" 
            v-model="searchQuery" 
            placeholder="搜索订单号、客户姓名..."
            @keyup.enter="searchOrders"
          >
          <button @click="searchOrders" class="search-btn">🔍 搜索</button>
        </div>
      </div>
    </div>

    <!-- 订单列表 -->
    <div class="orders-section">
      <div v-if="loading" class="loading">
        <div class="loading-spinner">🔄</div>
        <p>加载中...</p>
      </div>
      
      <div v-else-if="orders.length === 0" class="no-orders">
        <div class="no-orders-icon">📭</div>
        <p>暂无订单数据</p>
      </div>
      
      <div v-else class="orders-table">
        <table>
          <thead>
            <tr>
              <th>订单信息</th>
              <th>客户信息</th>
              <th>商品信息</th>
              <th>金额</th>
              <th>状态</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="order in orders" :key="order.orderId" class="order-row">
              <td class="order-info">
                <div class="order-number">{{ order.orderSn }}</div>
                <div class="order-id">ID: {{ order.orderId }}</div>
              </td>
              
              <td class="customer-info">
                <div class="customer-name">{{ order.receiverName }}</div>
                <div class="customer-phone">{{ order.receiverPhone }}</div>
                <div class="customer-address" :title="order.receiverAddress">
                  {{ order.receiverAddress.length > 20 ? order.receiverAddress.substring(0, 20) + '...' : order.receiverAddress }}
                </div>
              </td>
              
              <td class="product-info">
                <div v-if="order.orderItems && order.orderItems.length > 0" class="product-list">
                  <div v-for="item in order.orderItems.slice(0, 2)" :key="item.itemId" class="product-item">
                    <img v-if="item.productImage" :src="getImageUrl(item.productImage)" :alt="item.productName" class="product-image">
                    <div class="product-details">
                      <div class="product-name">{{ item.productName }}</div>
                      <div class="product-sku">SKU: {{ item.productSku }}</div>
                      <div class="product-quantity">数量: {{ item.quantity }}</div>
                    </div>
                  </div>
                  <div v-if="order.orderItems.length > 2" class="more-products">
                    +{{ order.orderItems.length - 2 }}个商品
                  </div>
                </div>
                <div v-else class="no-products">暂无商品信息</div>
              </td>
              
              <td class="amount-info">
                <div class="total-amount">¥{{ order.totalAmount }}</div>
                <div class="pay-amount">实付: ¥{{ order.payAmount }}</div>
              </td>
              
              <td class="status-info">
                <span :class="['status-badge', getStatusClass(order.status)]">
                  {{ getStatusText(order.status) }}
                </span>
              </td>
              
              <td class="time-info">
                <div class="created-time">{{ formatDate(order.createdAt) }}</div>
                <div v-if="order.updatedAt !== order.createdAt" class="updated-time">
                  更新: {{ formatDate(order.updatedAt) }}
                </div>
              </td>
              
              <td class="actions">
                <div class="action-buttons">
                  <button @click="viewOrderDetail(order)" class="action-btn view-btn">
                    👁️ 详情
                  </button>
                  
                  <button v-if="order.status === 1" @click="shipOrder(order)" class="action-btn ship-btn">
                    🚚 发货
                  </button>
                  
                  <button v-if="order.status === 2" @click="confirmOrder(order)" class="action-btn confirm-btn">
                    ✅ 确认收货
                  </button>
                  
                  <button v-if="order.status === 5" @click="processRefund(order)" class="action-btn refund-btn">
                    💰 处理退货
                  </button>
                  
                  <button v-if="order.status <= 1" @click="cancelOrder(order)" class="action-btn cancel-btn">
                    ❌ 取消
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <!-- 分页 -->
      <div v-if="totalPages > 1" class="pagination">
        <button @click="changePage(currentPage - 1)" :disabled="currentPage <= 1" class="page-btn">
          ⬅️ 上一页
        </button>
        
        <span class="page-info">
          第 {{ currentPage }} 页，共 {{ totalPages }} 页，总计 {{ total }} 条记录
        </span>
        
        <button @click="changePage(currentPage + 1)" :disabled="currentPage >= totalPages" class="page-btn">
          下一页 ➡️
        </button>
      </div>
    </div>

    <!-- 订单详情模态框 -->
    <div v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>订单详情</h3>
          <button @click="closeDetailModal" class="close-btn">✖️</button>
        </div>
        
        <div v-if="selectedOrder" class="modal-body">
          <div class="detail-section">
            <h4>基本信息</h4>
            <div class="detail-grid">
              <div class="detail-item">
                <label>订单编号：</label>
                <span>{{ selectedOrder.orderSn }}</span>
              </div>
              <div class="detail-item">
                <label>订单状态：</label>
                <span :class="['status-badge', getStatusClass(selectedOrder.status)]">
                  {{ getStatusText(selectedOrder.status) }}
                </span>
              </div>
              <div class="detail-item">
                <label>下单时间：</label>
                <span>{{ formatDate(selectedOrder.createdAt) }}</span>
              </div>
              <div class="detail-item">
                <label>更新时间：</label>
                <span>{{ formatDate(selectedOrder.updatedAt) }}</span>
              </div>
            </div>
          </div>
          
          <div class="detail-section">
            <h4>收货信息</h4>
            <div class="detail-grid">
              <div class="detail-item">
                <label>收货人：</label>
                <span>{{ selectedOrder.receiverName }}</span>
              </div>
              <div class="detail-item">
                <label>联系电话：</label>
                <span>{{ selectedOrder.receiverPhone }}</span>
              </div>
              <div class="detail-item full-width">
                <label>收货地址：</label>
                <span>{{ selectedOrder.receiverAddress }}</span>
              </div>
            </div>
          </div>
          
          <div class="detail-section">
            <h4>商品信息</h4>
            <div v-if="selectedOrder.orderItems && selectedOrder.orderItems.length > 0" class="items-list">
              <div v-for="item in selectedOrder.orderItems" :key="item.itemId" class="item-detail">
                <img v-if="item.productImage" :src="getImageUrl(item.productImage)" :alt="item.productName" class="item-image">
                <div class="item-info">
                  <div class="item-name">{{ item.productName }}</div>
                  <div class="item-sku">SKU: {{ item.productSku }}</div>
                  <div class="item-price">单价: ¥{{ item.productPrice }}</div>
                  <div class="item-quantity">数量: {{ item.quantity }}</div>
                  <div class="item-total">小计: ¥{{ item.totalPrice }}</div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="detail-section">
            <h4>金额信息</h4>
            <div class="amount-summary">
              <div class="amount-row">
                <span>商品总额：</span>
                <span>¥{{ selectedOrder.totalAmount }}</span>
              </div>
              <div class="amount-row">
                <span>实付金额：</span>
                <span class="pay-amount">¥{{ selectedOrder.payAmount }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'OrderManagement',
  props: {
    menuType: {
      type: String,
      default: ''
    },
    activeMenu: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      orders: [],
      stats: {},
      loading: false,
      currentPage: 1,
      pageSize: 10,
      totalPages: 0,
      total: 0,
      searchQuery: '',
      statusFilter: '',
      startDate: '',
      endDate: '',
      showDetailModal: false,
      selectedOrder: null,
      backendBaseUrl: 'http://localhost:8083'
    };
  },
  mounted() {
    console.log('OrderManagement mounted, activeMenu:', this.activeMenu);
    this.setStatusFilterByMenu();
    this.loadOrders();
    this.loadStats();
  },
  watch: {
    activeMenu: {
      handler() {
        // 当activeMenu变化时，重新设置状态过滤器并加载订单
        this.setStatusFilterByMenu();
        this.currentPage = 1; // 重置到第一页
        this.loadOrders();
      },
      immediate: false
    }
  },
  methods: {
    setStatusFilterByMenu() {
      // 根据父组件传递的菜单类型设置状态过滤器
      const menuStatusMap = {
        '待发货订单': '1',
        '运输中订单': '2',
        '交易成功的订单': '3',
        '申请退货订单': '4',
        '已退货订单': '5',
        '已取消订单': '6'
      };
      
      // 使用props中的activeMenu
      const currentMenu = this.activeMenu || '';
      if (menuStatusMap[currentMenu]) {
        this.statusFilter = menuStatusMap[currentMenu];
      } else {
        // 如果当前菜单不在映射表中，清空状态过滤器
        this.statusFilter = '';
      }
      
      console.log('当前菜单:', currentMenu, '状态过滤器:', this.statusFilter);
    },
    
    async loadOrders() {
      this.loading = true;
      try {
        let url = `${this.backendBaseUrl}/api/v1/orders/search?page=${this.currentPage}&size=${this.pageSize}`;
        
        const params = new URLSearchParams();
        if (this.statusFilter) params.append('status', this.statusFilter);
        if (this.startDate) params.append('startDate', this.startDate);
        if (this.endDate) params.append('endDate', this.endDate);
        
        if (params.toString()) {
          url += '&' + params.toString();
        }
        
        console.log('正在请求订单列表，URL:', url);
        console.log('当前状态过滤器:', this.statusFilter);
        
        const response = await axios.get(url);
        
        if (response.data.success) {
          const data = response.data.data;
          this.orders = data.orders || [];
          this.total = data.total || 0;
          this.totalPages = data.totalPages || 0;
          this.currentPage = data.page || 1;
        } else {
          console.error('获取订单列表失败:', response.data.message);
          this.orders = [];
        }
      } catch (error) {
        console.error('获取订单列表失败:', error);
        this.orders = [];
      } finally {
        this.loading = false;
      }
    },
    
    async loadStats() {
      try {
        const response = await axios.get(`${this.backendBaseUrl}/api/v1/orders/stats`);
        if (response.data.success) {
          this.stats = response.data.data;
        }
      } catch (error) {
        console.error('获取统计信息失败:', error);
      }
    },
    
    async searchOrders() {
      if (!this.searchQuery.trim()) {
        this.loadOrders();
        return;
      }
      
      this.loading = true;
      try {
        const response = await axios.get(`${this.backendBaseUrl}/api/v1/orders/search`, {
          params: {
            keyword: this.searchQuery,
            status: this.statusFilter || null,
            startDate: this.startDate || null,
            endDate: this.endDate || null,
            page: this.currentPage,
            size: this.pageSize
          }
        });
        
        if (response.data.success) {
          const data = response.data.data;
          this.orders = data.orders || [];
          this.total = data.total || 0;
          this.totalPages = data.totalPages || 0;
          this.currentPage = data.page || 1;
        } else {
          console.error('搜索订单失败:', response.data.message);
          this.orders = [];
        }
      } catch (error) {
        console.error('搜索订单失败:', error);
        this.orders = [];
      } finally {
        this.loading = false;
      }
    },
    
    async shipOrder(order) {
      if (!confirm(`确认发货订单 ${order.orderSn} 吗？`)) {
        return;
      }
      
      try {
        const response = await axios.put(`${this.backendBaseUrl}/api/v1/orders/${order.orderId}/status`, {
          status: 2
        });
        
        if (response.data.success) {
          alert('发货成功！');
          this.loadOrders();
          this.loadStats();
        } else {
          alert('发货失败: ' + response.data.message);
        }
      } catch (error) {
        console.error('发货失败:', error);
        alert('发货失败: ' + (error.response?.data?.message || '网络错误'));
      }
    },
    
    async confirmOrder(order) {
      if (!confirm(`确认收货订单 ${order.orderSn} 吗？`)) {
        return;
      }
      
      try {
        const response = await axios.put(`${this.backendBaseUrl}/api/v1/orders/${order.orderId}/confirm`);
        
        if (response.data.success) {
          alert('确认收货成功！');
          this.loadOrders();
          this.loadStats();
        } else {
          alert('确认收货失败: ' + response.data.message);
        }
      } catch (error) {
        console.error('确认收货失败:', error);
        alert('确认收货失败: ' + (error.response?.data?.message || '网络错误'));
      }
    },
    
    async cancelOrder(order) {
      if (!confirm(`确认取消订单 ${order.orderSn} 吗？`)) {
        return;
      }
      
      try {
        const response = await axios.put(`${this.backendBaseUrl}/api/v1/orders/${order.orderId}/cancel`);
        
        if (response.data.success) {
          alert('订单取消成功！');
          this.loadOrders();
          this.loadStats();
        } else {
          alert('订单取消失败: ' + response.data.message);
        }
      } catch (error) {
        console.error('订单取消失败:', error);
        alert('订单取消失败: ' + (error.response?.data?.message || '网络错误'));
      }
    },
    
    async processRefund(order) {
      if (!confirm(`确认处理订单 ${order.orderSn} 的退货申请吗？`)) {
        return;
      }
      
      try {
        const response = await axios.put(`${this.backendBaseUrl}/api/v1/orders/${order.orderId}/refund/process`);
        
        if (response.data.success) {
          alert('退货处理成功！');
          this.loadOrders();
          this.loadStats();
        } else {
          alert('退货处理失败: ' + response.data.message);
        }
      } catch (error) {
        console.error('退货处理失败:', error);
        alert('退货处理失败: ' + (error.response?.data?.message || '网络错误'));
      }
    },
    
    async viewOrderDetail(order) {
      try {
        const response = await axios.get(`${this.backendBaseUrl}/api/v1/orders/${order.orderId}`);
        if (response.data.success) {
          this.selectedOrder = response.data.data;
          this.showDetailModal = true;
        } else {
          alert('获取订单详情失败: ' + response.data.message);
        }
      } catch (error) {
        console.error('获取订单详情失败:', error);
        alert('获取订单详情失败: ' + (error.response?.data?.message || '网络错误'));
      }
    },
    
    closeDetailModal() {
      this.showDetailModal = false;
      this.selectedOrder = null;
    },
    
    refreshOrders() {
      this.loadOrders();
      this.loadStats();
    },
    
    exportOrders() {
      // 导出订单功能
      alert('导出功能开发中...');
    },
    
    changePage(page) {
      if (page < 1 || page > this.totalPages) {
        return;
      }
      this.currentPage = page;
      if (this.searchQuery.trim()) {
        this.searchOrders();
      } else {
        this.loadOrders();
      }
    },
    
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return date.toLocaleString('zh-CN');
    },
    
    getStatusText(status) {
      const statusMap = {
        0: '待付款',
        1: '待发货',
        2: '运输中',
        3: '已完成',
        4: '已取消',
        5: '申请退货',
        6: '已退货'
      };
      return statusMap[status] || '未知状态';
    },
    
    getStatusClass(status) {
      const classMap = {
        0: 'pending-payment',
        1: 'pending-shipment',
        2: 'shipping',
        3: 'completed',
        4: 'cancelled',
        5: 'refund-applied',
        6: 'refunded'
      };
      return classMap[status] || 'unknown';
    },
    
    getImageUrl(imagePath) {
      if (!imagePath) return '';
      if (imagePath.startsWith('http')) {
        return imagePath;
      }
      return this.backendBaseUrl + imagePath;
    },
    
    getPageTitle() {
      const currentMenu = this.activeMenu || '';
      return currentMenu || '订单管理';
    }
  }
};
</script>

<style scoped>
.order-management {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.page-header h1 {
  margin: 0;
  color: #2c3e50;
  font-size: 28px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.refresh-btn, .export-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.refresh-btn {
  background: #3498db;
  color: white;
}

.refresh-btn:hover {
  background: #2980b9;
}

.export-btn {
  background: #27ae60;
  color: white;
}

.export-btn:hover {
  background: #229954;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-icon {
  font-size: 40px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 50%;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #2c3e50;
}

.stat-label {
  color: #7f8c8d;
  font-size: 14px;
  margin-top: 5px;
}

.filter-section {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.filter-row {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-group label {
  font-weight: 500;
  color: #2c3e50;
}

.filter-group select,
.filter-group input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.search-group {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.search-group input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  width: 250px;
}

.search-btn {
  padding: 8px 16px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.orders-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  
}

.loading {
  text-align: center;
  padding: 60px;
  color: #7f8c8d;
}

.loading-spinner {
  font-size: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.no-orders {
  text-align: center;
  padding: 60px;
  color: #7f8c8d;
}

.no-orders-icon {
  font-size: 60px;
  margin-bottom: 20px;
}

.orders-table table {
  width: 100%;
  border-collapse: collapse;
}

.orders-table th {
  background: #f8f9fa;
  padding: 15px;
  text-align: left;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 2px solid #e9ecef;
}

.orders-table td {
  padding: 15px;
  border-bottom: 1px solid #e9ecef;
  vertical-align: top;
}

.order-row:hover {
  background: #f8f9fa;
}

.order-info .order-number {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 5px;
}

.order-info .order-id {
  font-size: 12px;
  color: #7f8c8d;
}

.customer-info .customer-name {
  font-weight: 500;
  margin-bottom: 5px;
}

.customer-info .customer-phone {
  color: #7f8c8d;
  font-size: 14px;
  margin-bottom: 5px;
}

.customer-info .customer-address {
  color: #7f8c8d;
  font-size: 12px;
}

.product-list {
  max-width: 200px;
}

.product-item {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}

.product-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.product-details .product-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.product-details .product-sku,
.product-details .product-quantity {
  font-size: 12px;
  color: #7f8c8d;
}

.more-products {
  font-size: 12px;
  color: #7f8c8d;
  font-style: italic;
}

.amount-info .total-amount {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 5px;
}

.amount-info .pay-amount {
  font-size: 14px;
  color: #27ae60;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.pending-payment {
  background: #fff3cd;
  color: #856404;
}

.status-badge.pending-shipment {
  background: #d4edda;
  color: #155724;
}

.status-badge.shipping {
  background: #cce5ff;
  color: #004085;
}

.status-badge.completed {
  background: #d1ecf1;
  color: #0c5460;
}

.status-badge.cancelled {
  background: #f8d7da;
  color: #721c24;
}

.status-badge.refund-applied,
.status-badge.refunded {
  background: #e2e3e5;
  color: #383d41;
}

.time-info .created-time {
  font-size: 14px;
  margin-bottom: 5px;
}

.time-info .updated-time {
  font-size: 12px;
  color: #7f8c8d;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.view-btn {
  background: #6c757d;
  color: white;
}

.ship-btn {
  background: #007bff;
  color: white;
}

.confirm-btn {
  background: #28a745;
  color: white;
}

.refund-btn {
  background: #ffc107;
  color: #212529;
}

.cancel-btn {
  background: #dc3545;
  color: white;
}

.action-btn:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
}

.page-btn {
  padding: 8px 16px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.page-btn:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}

.page-info {
  color: #7f8c8d;
  font-size: 14px;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h3 {
  margin: 0;
  color: #2c3e50;
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #7f8c8d;
}

.modal-body {
  padding: 20px;
}

.detail-section {
  margin-bottom: 30px;
}

.detail-section h4 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 5px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.detail-item {
  display: flex;
  gap: 10px;
}

.detail-item.full-width {
  grid-column: 1 / -1;
}

.detail-item label {
  font-weight: 500;
  color: #7f8c8d;
  min-width: 80px;
}

.items-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.item-detail {
  display: flex;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.item-info {
  flex: 1;
}

.item-name {
  font-weight: 600;
  margin-bottom: 5px;
}

.item-sku,
.item-price,
.item-quantity,
.item-total {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 3px;
}

.item-total {
  font-weight: 600;
  color: #27ae60;
}

.amount-summary {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

.amount-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 16px;
}

.amount-row:last-child {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 18px;
  border-top: 1px solid #dee2e6;
  padding-top: 10px;
}

.amount-row .pay-amount {
  color: #27ae60;
}
</style>